<template>
  <div class="my-customization">
    <div>
        <leftMenu></leftMenu>
    </div>
    
    <div class="right-content">
        <breadcrumbTag></breadcrumbTag>
        <div class="right-head">
          <div :style="`width: ${rightHeadW}; overflow: hidden;`">
            <!-- <div v-for="(item, index) in prolist" :key="index" @click="onMyHead(item, index)" class="my-head-list"> -->
              <!-- <el-tooltip class="item" effect="dark" :content="item" placement="top-start"> -->
              <span v-for="(item, index) in prolist" :key="index" @click="onMyHead(item, index)" :class="myHeadIndex == index ? 'my-head action' : 'my-head'">
                <!-- <span></span> -->
                {{ item }}
              </span>
              <!-- </el-tooltip> -->
            <!-- </div> -->
          </div>
        </div>
        <!-- <el-form ref="customizedParams" :model="customizedParams" :inline="true" size="small" :rules="rules" class="data-form"> -->
          <div class="my-content">
            <div class="flex flex-1">
              <div v-if="myHeadName" class="flex-1">
                <div class="title"><img src="../../../public/image/icon.png" alt="" width="15px" style="margin-right: 10px" /> {{ myHeadName }}</div>
                <div class="table-list flex data-list">
                  <div class="flex-1 flex flex-c">
                    <div class="table-content">
                      <!-- <div class="table-tr flex">
                        <div>描述</div>
                        <div>{{ dataView.prolist[myHeadIndex][myHeadName]['描述'] }}</div>
                      </div> -->
                      <!-- <div class="table-tr flex">
                        <div>关键词</div>
                        <div>{{ dataView.prolist[myHeadIndex][myHeadName]['关键词'] }}</div>
                      </div>
                      <div class="table-tr flex">
                        <div>更新频率</div>
                        <div>{{ dataView.prolist[myHeadIndex][myHeadName]['更新频率'] }}</div>
                      </div>
                      <div class="table-tr flex">
                        <div>数据量</div>
                        <div>{{ dataView.prolist[myHeadIndex][myHeadName]['数据量'] }}</div>
                      </div>
                      <div class="table-tr flex">
                        <div>最新更新时间</div>
                        <div>{{ dataView.prolist[myHeadIndex][myHeadName]['最新更新时间'] }}</div>
                      </div> -->
                      <!-- <div>  {{ Object.keys(dataView.prolist[myHeadIndex][myHeadName]) }} </div> -->
                      <div class="table-tr flex" v-for="(row, index) in Object.keys(dataView.prolist[myHeadIndex][myHeadName])" :key="index + 'm'">
                        <template v-if="row == '描述'">
                          <div>{{ row }}</div>
                          <div>{{ dataView.prolist[myHeadIndex][myHeadName][row] }}</div>
                        </template>
                      </div>
                      <div class="table-tr flex" v-for="(row, index) in Object.keys(dataView.prolist[myHeadIndex][myHeadName])" :key="index + 't'">
                        <template v-if="row != 'jwdfw' && row != 'showtype' && row !== '描述' && row !== 'spatialscale' && row !== 'datatype'">
                          <div>{{ row }}</div>
                          <div>{{ dataView.prolist[myHeadIndex][myHeadName][row] }}</div>
                        </template>
                      </div>
                    </div>
                  </div>
                  <div class="customized-top-right">
                    <div class="flex flex-cs flex-sb" v-if="dataView.prolist[myHeadIndex][myHeadName].spatialscale ||  dataView.prolist[myHeadIndex][myHeadName].datatype">
                      <div>
                        <div class="title" v-if="dataView.prolist[myHeadIndex][myHeadName].spatialscale">{{ dataView.prolist[myHeadIndex][myHeadName].spatialscale }}</div>
                        <!-- <div class="content" v-if="dataView.prolist[myHeadIndex][myHeadName].datatype">{{ dataView.prolist[myHeadIndex][myHeadName].datatype }}</div> -->
                      </div>
                      <img src="../../../public/image/quanqiu.png" alt="" width="40px" />
                    </div>
                    <div class="flex flex-cs flex-sb" v-if="dataView.prolist[myHeadIndex][myHeadName].spatialscale || dataView.prolist[myHeadIndex][myHeadName].datatype">
                      <div>
                        <div class="title" v-if="dataView.prolist[myHeadIndex][myHeadName].datatype">{{ dataView.prolist[myHeadIndex][myHeadName].datatype }}</div>
                        <!-- <div class="content" v-if="dataView.prolist[myHeadIndex][myHeadName].spatialreso">{{ dataView.prolist[myHeadIndex][myHeadName].spatialreso }}</div> -->
                      </div>
                      <img src="../../../public/image/fen.png" alt="" width="40px" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
           
            <mapData ref="mapDataRef" mapId="mapId1"></mapData>
            <div class="footer-button" style="text-align: end">
              <el-button type="primary" @click="saveClick">预览</el-button>
              <el-button @click="resetClick">重置</el-button>
            </div>
          </div>

        
        <!-- </el-form> -->
    </div>


    <el-dialog title="订阅详情" :visible.sync="dialogVisible" width="1100px" top="3%" :before-close="handleClose" :closeOnClickModal="false">

      <div>
        <div class="iframeFalse map" style="width: 100%" v-if="customizedParams.showType != 3">
          <wizMap ref="wizmapMe2" v-if="dialogVisible" mapId="mapid2" ></wizMap>
           <!-- <img src="../../assets/image/222.png" alt="" width="100%"> -->
        </div>
        <dataViewParams ref="dataViewParams"></dataViewParams>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" :loading="addLoading" @click="addShoppingCart">加入购物车</el-button>
        <!-- <el-button size="small" type="primary" @click="addShoppingCart">提 交</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import wizMap from "@/components/wizMap/wizMap.vue";
import mapData from "@/components/mapData.vue";
import dataViewParams from "@/components/dataView.vue";
import leftMenu from "@/components/leftMenu.vue";
import { mapState } from "vuex";
import breadcrumbTag from '@/components/breadcrumbTag.vue'
import { Loading } from "element-ui";

export default {
  name: "myCustomization",
  components: {
    wizMap,
    dataViewParams,
    leftMenu,
    breadcrumbTag,
    mapData
  },
  props: {
    viewType: {
      type: String,
      default: "edit",
    },
  },
  computed: {
    ...mapState(["menuItem"]),
  },
  watch: {
      menuItem(newVal, oldVal) {
        // console.log(newVal, oldVal, 'watchMenuItem');
          if (newVal) {
              this.resetClick()
              this.dataInfo(newVal.id);
              this.$refs.mapDataRef.dataPartList(newVal.id)
          }

      },
  },
  data() {
    let _this = this;
    return {
      rightHeadW: 'auto',
      componentStatus: false,
      myHeadIndex: 0,
      myHeadName: "",
      dialogVisible: false,
      addLoading: false,

      // iframeStatus: true,
      // wizmapStatus: true,
      // iframeContent: "",
      // elementTabPosition: "",
      // addLmasurl: "",
      // partListSteps: [
      //   {
      //     中国地面逐小时资料: {},
      //   },
      // ],
      // stepsList: [],
      prolist: [],
      dataViewShowType: '1', // 1 站点数据  2格点数据 3卫星数据 4 测绘数据
      dataView: {
        filedetails: "",
        keyword: "",
        rate: "",
        number: "",
        receiveTime: "",
        prolist: [
            // {
            //     "国家站逐小时观测": {
            //         "描述": "包括地面2400站国家站逐小时观测数据，要素包括地面2米气温、2米地面相对湿度、10分钟风、2分钟风、能见度，逐小时更新",
            //         "更新频率": "1小时",
            //         "数据量": "全国2438站点",
            //         "最新更新时间": "2024-12-14 13:00"
            //     }
            // },
            // {
            //     "区域站逐小时观测": {
            //         "描述": "包括地面7万站全国区域站逐小时观测数据，要素包括地面2米气温、2米地面相对湿度、10分钟风、2分钟风、能见度",
            //         "更新频率": "1小时",
            //         "数据量": "全国72356站点",
            //         "最新更新时间": "2024-12-14 13:00"
            //     }
            // },
            // {
            //     "军内地面逐小时观测": {
            //         "描述": "包括军内1000站逐小时观测数据，要素包括地面2米气温、2米地面相对湿度、10分钟风、2分钟风、能见度",
            //         "更新频率": "1小时",
            //         "数据量": "全国1204站点",
            //         "最新更新时间": "2024-12-14 13:00"
            //     }
            // }
        ],
        spatialscaleName: "",
        spatialscale: "",
        spatialresoName: "",
        spatialreso: "",
      },
      customizedParams: {},
      // siteOptions: [],
      // weixingOptions: [],
      // weiixng: {
      //   series_name: "",
      //   satellites: [],
      // },
      // optionsList: [
      //   { label: "/RecvData/fub", value: "/RecvData/fub" },
      //   { label: "/RecvData/htb", value: "/RecvData/htb" },
      //   { label: "/RecvData/grib", value: "/RecvData/grib" },
      //   { label: "/RecvData/hyz", value: "/RecvData/hyz" },
      //   { label: "/RecvData/kj", value: "/RecvData/kj" },
      //   { label: "/RecvData/kjsk", value: "/RecvData/kjsk" },
      //   { label: "/RecvData/ldsw", value: "/RecvData/ldsw" },
      //   { label: "新建目录", value: "add" },
      // ],
      // listObjectStatus: false,
      // lmasurlStatus: false,
      // fileListInif: {
      //   定制范围: [],
      //   要素列表: [],
      //   订阅数据时间: [],
      //   L1通道选择: [],
      //   L2产品选择: [],
      //   卫星选择: [],
      //   地面要素: [],
      //   高空层次: [],
      //   高空要素: [],
      // },
      // elementListInfo: {},
      // fileDataInif: ["要素列表", "定制层次"],
      // customizedParams: {
      //   datatype: '1',
      //   range: "地图选择", 
      //   scope: "", // 范围
      //   // type: 1, //1气象数据 2测绘数据
      //   timetype: 1,
      //   isexamine: 1, //1未审核 2审核通过 3审核拒绝
      //   dataViewName: "",
      //   jsonDate: {
      //     dataViewName: '',
      //     dataView: "", // 表头数据
      //     mapPosition: "", // 地图数据
      //     订阅数据时间: ['长期'],
      //   },
      //   fileid: "",
      //   datelong: "",
      //   account: "user",
      //   password: "user",
      //   protno: "21",
      //   url: "/data",
      //   ipaddr: "21.17.240.181",
      //   filename: "",
      //   startime: "",
      //   endtime: "",
      //   crearetime: "",
      //   lmsa: "",
      //   lmasurl: "",
      // },
      // yaosuValue: [],
      // rules: {
      //   lmsa: [
      //     {
      //       required: true,
      //       validator: (rule, value, callback) => {
      //         if (value === "" && this.customizedParams.datatype == 2) {
      //           callback(new Error("请输入请提供长报文服务地址"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "blur",
      //     },
      //   ],
      //   lmasurl: [
      //     {
      //       required: true,
      //       validator: (rule, value, callback) => {
      //         if (value === "" && this.customizedParams.datatype == 2) {
      //           callback(new Error("请输入接收端路径"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "blur",
      //     },
      //   ],
      //   account: [
      //     {
      //       required: true,
      //       validator: (rule, value, callback) => {
      //         if (value === "" && this.customizedParams.datatype == 1) {
      //           callback(new Error("请输入用户名"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "blur",
      //     },
      //   ],
      //   url: [
      //     {
      //       required: true,
      //       validator: (rule, value, callback) => {
      //         if (value === "" && this.customizedParams.datatype == 1) {
      //           callback(new Error("请输入路径"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "blur",
      //     },
      //   ],
      //   password: [
      //     {
      //       required: true,
      //       validator: (rule, value, callback) => {
      //         if (value === "" && this.customizedParams.datatype == 1) {
      //           callback(new Error("请输入输入密码"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "blur",
      //     },
      //   ],
      //   ipaddr: [
      //     {
      //       required: true,
      //       validator: (rule, value, callback) => {
      //         if (value === "" && this.customizedParams.datatype == 1) {
      //           callback(new Error("请输入FTP地址"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "blur",
      //     },
      //   ],
      //   protno: [
      //     {
      //       required: true,
      //       validator: (rule, value, callback) => {
      //         if (value === "" && this.customizedParams.datatype == 1) {
      //           callback(new Error("请输入端口号"));
      //         } else {
      //           callback();
      //         }
      //       },
      //       trigger: "blur",
      //     },
      //   ],
      // },
    };
  },
  created() {},
  mounted() {
    // 获取 vuex 数据
    this.$store.commit('setBadgeNum')
    // 查看还是编辑
    this.dataInfo(this.$store.getters.menuItem.id);

    // // 站点选择数据
    // this.$http.post('/area/list?code=000000').then(res => {
    //     if(res.code == 200) {
    //         let siteOptions = res.data || []
    //         this.siteOptions = siteOptions.map(item => {
    //             return {
    //                 value: item.name,
    //                 key: item.code,
    //                 label: item.name,
    //             }
    //         })
    //     } else {
    //         this.$message.error(res.message)
    //     }
    // }).catch(err => {
    //     this.$message.error(err.message)
    // })
  },
  methods: {
    onMyHead(item, index) {
        this.myHeadIndex = index;
        this.myHeadName = item;
        // 初始化
        this.$refs.mapDataRef.myHeadName = item

    },
    dataInfo(id) {
          this.$http
            .post(`/fileList/pro/list?id=${id}`)
            .then((res) => {
              if (res.code == 200) {
                let data = res.data || [];
                let list = [];
                this.dataView = data;
                data.prolist.forEach((item) => {
                  list.push(...Object.keys(item));
                });
                // this.prolist = list.concat(['测试1', '测试2', '测试3', '测试4', '测试5']);
                this.prolist = list;
                // 手动获取width
                if (list.length > 6){
                    this.rightHeadW = (300 * list.length) + 'px'
                }
                // console.log(this.prolist[0]);
                this.myHeadIndex = 0
                this.myHeadName = this.prolist[0];
                this.dataViewShowType = data.prolist[0][this.myHeadName].showtype || '1';

                // 加载组件数据
                this.$nextTick(() => {
                   // let id = this.$store.getters.menuItem.id
                   // 判断是否已加载完成
                   let fn = new Promise((reject, resolve) => {
                      this.$refs.mapDataRef.dataPartList(id, reject)
                   })
                   fn.then(res => {
                    this.$refs.mapDataRef.customizedParams.showType = this.dataViewShowType
                    this.$refs.mapDataRef.myHeadName = this.myHeadName
                   })
                })
                // this.customizedParams.filename = data.filename;
                // console.log( this.prolist,  'dataInfo->this.prolist ');
                // 加载卫星数据
                // if (this.dataViewShowType == 3) {
                //   this.dataWeiXing();
                // }
                // this.iframeClick(true) // 加载地图
                // this.dataPartList(id);
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.$message.error(err.message);
            });

        // let data = require("@/assets/json/datalist.json")[`dataView${this.$route.query.showType}`]
        // let list = [];
        // this.dataView = data;
        // data.prolist.forEach((item) => {
        //     list.push(...Object.keys(item));
        // });
        // this.prolist = list;
        // this.myHeadName = this.prolist[0];
        // this.dataViewShowType = data.prolist[0][this.myHeadName].showtype
        // this.customizedParams.filename = data.filename;
        // console.log( data,  this.myHeadName,    this.dataViewShowType, ' this.prolist ');
        
    },
   // 卫星选择数据
    dataWeiXing(type) {
        this.$http.post("/fileList/satellite/list").then((res) => {
            if (res.code == 200) {
              let weixingOptions = res.data || [];
              this.weixingOptions = weixingOptions.map((item) => {
                return {
                  value: item,
                  key: item.series_name,
                  label: item.series_name,
                };
              });
            } else {
              this.$message.error(res.message);
            }
          }).catch((err) => {
            this.$message.error(err.message);
          });
    },
    // dataPartList(id) {
    //   this.$http.post(`/fileList/part/list?id=${id}`).then((res) => {
    //       if (res.code == 200) {
    //         this.partListSteps = res.data || [];
    //         let row = ['订阅数据时间'];
    //         this.partListSteps.forEach((item) => {
    //          if (item.hasOwnProperty(this.myHeadName)) {
    //               row = Object.keys(item[this.myHeadName])
    //           }
    //         });
    //         // console.log(row, this.myHeadName,  this.partListSteps[0].hasOwnProperty(this.myHeadName), 'obj');
    //         // this.stepsList = [...row];
    //         this.wizmapStatus = false
    //         setTimeout(() => {
    //           this.stepsList = [...row];
    //           this.stepsList.forEach((item) => {
    //             this.$set(this.customizedParams.jsonDate, item, []);
    //           });
    //           this.wizmapStatus = true
    //         },0);
    //       } else this.$message.error(res.message);
    //     })
    //     .catch((err) => {
    //       this.$message.error(err.message);
    //     });
    //   // console.log(this.myHeadName, 'dataPartList');
    // },
    // weixingChange(val) {
    //   // console.log(val, "weixingChange");
    //   this.stepsList = val.satellites.map((item) => {
    //     return item.name;
    //   });
    //   // this.stepsName = val.satellites[0];
    //   this.stepsList.forEach((item) => {
    //     this.customizedParams.jsonDate[item] = [];
    //   });
    // },
    // fileListInifRadioChange() {
    //   if (this.customizedParams.timetype == 1) {
    //     this.customizedParams.startime = "";
    //     this.customizedParams.endtime = "";
    //   }
    // },
    // // 全选
    // qxChange(val, item) {
    //   // console.log(val, item, this.partListSteps, "qxChange");
    //   let objFled = this.partListSteps.find((item) => {
    //     return Object.keys(item)[0] == this.myHeadName;
    //   });
    //   if (val){
    //     this.customizedParams.jsonDate[item] = objFled[this.myHeadName][item].map(item => item.name)
    //   } else {
    //     this.customizedParams.jsonDate[item] = []
    //   }
    // },
    // 预览
    saveClick() {

      let data = this.$refs.mapDataRef.dataSave() || {}

      if (data.hasOwnProperty('mapData') && data.hasOwnProperty('dataView')){
          this.dialogVisible = true;
          let dataView = data.dataView
          dataView.jsonDate.dataView = this.dataView.prolist[this.myHeadIndex];
          dataView.jsonDate.showType = dataView.showType;
          dataView.fileid = this.$store.getters.menuItem.id
          // dataView.filename = this.dataView.filename
          dataView.filename = this.myHeadName
          // dataView.filenameId = this.$store.getters.menuItem.id
          // dataView.showType = this.dataViewShowType
          this.customizedParams = {...dataView}
          console.log(dataView, data, '预览');
          
          this.$nextTick(() => {
            this.$refs.dataViewParams.initParams(dataView);
            if (this.customizedParams.showType != 3){
                // 根据当前产品，查询当下多有的站点
                let fn = new Promise((reject, resolve) => {
                  this.$refs.wizmapMe2.getJsonAllSta(this.myHeadName, reject)
                })
                let fn1 = new Promise((reject, resolve) => {
                  this.$refs.wizmapMe2.getJsonAllSite(reject)
                })
                Promise.allSettled([fn, fn1]).then(res => {
                  this.$refs.wizmapMe2.mapData = data.mapData
                })
            }
            
          })
      }
      // this.dialogVisible = true;
      // return

      // // let data = { ...this.customizedParams };
      // // let validateStatus = false
      // // if (this.customizedParams.scope == '') {
      // //   this.$message.error("请选择地图范围");
      // //   return
      // // }
      
      // let validateStatus = true
      // // 判断是否选择时间
      // if (this.dataViewShowType == 1 || this.dataViewShowType == 2){
      //   if (this.customizedParams.timetype == 2 ){
      //       if (!this.customizedParams.startime || !this.customizedParams.endtime) {
      //         this.$message.error("请选择开始时间和结束时间");
      //         return
      //       }
      //     }
      //     // 判断是否选择要素
      //     validateStatus = this.stepsList.every((item) => {
      //       if (data.jsonDate[item].length > 0) {
      //         return true;
      //       } else {
      //         this.$message.error(`请选择 ${item}`);
      //         return false;
      //       }
      //   });
      // } else {
      //   // this.customizedParams.jsonDate['订阅数据时间'] = []
      // }
   

      // if (validateStatus) {
      //   this.$refs["customizedParams"].validate((valid) => {
      //     if (valid) {
      //       data.dataViewName = this.myHeadName;
      //       // this.customizedParams.
      //       data.jsonDate.dataView = this.dataView.prolist[this.myHeadIndex];
      //       data.jsonDate.yaosuValue = this.yaosuValue
      //       this.dialogVisible = true;
      //       console.log(data, "validateStatus");
      //       this.$nextTick(() => {
      //         this.$refs.dataViewParams.initParams(data);
      //         // this.$refs.wizmapMe2.mapData = data.jsonDate.mapPosition ;
      //         this.$refs.wizmapMe2.mapData = {
      //           mapView: [[105, 36], 3],
      //             isShowPane: this.iframeStatus,
      //             // dataView: this.dataView,
      //             paneType: 1,
      //             showtype: this.dataViewShowType, //1 不带测绘  2测绘数据
      //             jwdfw: [
      //               [140, 0],
      //               [70, 0],
      //               [70, 60],
      //               [140, 60],
      //             ],
      //             bakView: data.jsonDate.mapPosition,
      //         }
      //       });
      //     } else {
      //       console.log("error submit!!");
      //       return false;
      //     }
      //   });
      // }
    },
    // 加入购物车
    addShoppingCart() {
      let data =  JSON.parse(JSON.stringify(this.customizedParams));
      // data.type = this.dataViewShowType;
      data.userid = sessionStorage.getItem("userid");
      data.username = sessionStorage.getItem("username");
      data.jsonDate.dataViewName = this.myHeadName;
      data.jsonDate = JSON.stringify(data.jsonDate);
      console.log(data, '加入购物车');
      this.addLoading = true
      // data.scope = data.jsonDate.mapData
      this.$http
        .post("/fileSubscribe/save", data)
        .then((res) => {
          this.addLoading = false
          if (res.code == 200) {
            this.$message.success(res.message);
            // 获取购物车数量
            this.$store.commit('setBadgeNum')
            this.dialogVisible = false;
            // this.$store.commit('setDialogInfo', true)
            // this.$store.commit('SetMenu', {menuname: '购物车', url: `/shoppingCart`})


            // this.$router.push(`/dataManagement`)
            // this.$store.commit('SetMenu', {menuname: '我的订阅', url: `/dataManagement`})
          } else {
            this.$message.error(res.message);
          }
        }).catch((err) => {
          this.addLoading = false
          this.$message.error(err.message);
        });
    },
    // timeChange(val, item, index) {
    //   // this.customizedParams.jsonDate['订阅数据时间'][index] = `${item}: ${val}`
    //   this.customizedParams.jsonDate["订阅数据时间"][0] = `${this.customizedParams.startime} - ${this.customizedParams.endtime}`;
    // },
    handleClose() {
      this.dialogVisible = false;
    },
    resetClick() {
      this.$refs.mapDataRef.resetClick()
    },

    // iframeClick( iframeStatus ) {
    //   console.log(iframeStatus, 'iframeStatus');
      
    //   this.iframeStatus = iframeStatus;
    //   if (this.iframeStatus) {
    //     var obj = {
    //       mapView: [[105, 36], 3],
    //       isShowPane: this.iframeStatus,
    //       paneType: false,
    //       showtype: this.dataViewShowType, //1 不带测绘  2测绘数据
    //     };
    //     // const iframe = this.$refs.myIframe;

    //     // this.$refs.wizmapMe.mapData = obj;
    //     // iframe.contentWindow.postMessage(obj, "*");
    //   } else {
    //     var obj = {
    //       mapView: [[105, 36], 4],
    //       isShowPane: this.iframeStatus,
    //       // dataView: this.dataView,
    //       paneType: 1,
    //       showtype: this.dataViewShowType, // 1 站点数据  2格点数据 3卫星数据 4 测绘数据
    //       jwdfw: [
    //         [140, 0],
    //         [70, 0],
    //         [70, 60],
    //         [140, 60],
    //       ],
    //       bakView: '',
         
    //     };
    //     // const iframe = this.$refs.myIframe;
    //     // iframe.contentWindow.postMessage(obj, "*");
    //   }
    //   this.mapDataParams = obj
    //   this.$refs.wizmapMe.mapData = obj;
    // },

    // // 地图确认按钮
    // handlerMapChane(data) {
    //   console.log(data, "handlerMapChane");
    //   this.customizedParams.jsonDate["mapPosition"] = {
    //     ...data.mapData,
    //   };
    //   this.customizedParams.showType = this.dataViewShowType
    //   // 战区赋值
    //   if (data.mapData.hasOwnProperty("selectList")) {
    //     let scope  = [...new Set(data.mapData.selectList)]
    //     this.customizedParams.scope = scope.join('，') || '' // 战区 范围
    //   }
    //   if (this.dataViewShowType == 2){
    //     let scope  = [...new Set(data.mapData.tableData.map(item => item.area2))]
    //     this.customizedParams.scope = scope.join(',')
    //   }
    //   if (data.hasOwnProperty("close")) {
    //     // this.iframeStatus = true
    //     this.iframeClick(true);
    //   }
    // },
    // lmasurlChange(path) {
    //   console.log(path, "pathChange");
    //   if (path == "add") {
    //     this.lmasurlStatus = true;
    //     this.customizedParams.lmasurl = "";
    //   } else {
    //     this.lmasurlStatus = false;
    //   }
    //   // this.fileListInif.iframeData = path
    // },
    // addLmasurlClick() {
    //   this.customizedParams.lmasurl = this.addLmasurl;
    //   this.optionsList.splice(this.optionsList.length - 1, 0, { label: this.addLmasurl, value: this.addLmasurl });
    //   this.lmasurlStatus = false;
    //   this.addLmasurl = "";
    // },
    // // 复选框change事件
    // checkboxChange(val, row){
    //     console.log(val, row);
    //     if (val){
    //       this.yaosuValue.push(row.value)
    //     } else {
    //       this.yaosuValue.splice(this.yaosuValue.indexOf(row.value), 1)
    //     }
    //     // console.log(this.yaosuValue, 'yaosuValue');
        
    // },
    // 头部滚动事件
    rightHeadScroll(e){
      console.log(e);
      
    }
  },
};
</script>
<style lang="scss" scoped>
.my-customization {
  // width: 90vw;
  flex: 1;
  // background-color: #fff;
  // overflow-y: auto;
  display: flex;
  .right-content{
    flex: 1;
    // width: 90%;
    // background-image: url(../../../public/image/border.png);
    // background-size: 100% 100%;
    // background-color: #fff;
    // padding: 10px;
    margin-left: 20px;

  }
  .right-head{
    // width: 1390px;
    height: 45px;
    overflow: hidden;
    overflow-x: auto;
    // padding-top: 10px;
    text-wrap: nowrap;
    cursor: pointer;
    position: relative;
    >div{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
    }
  }
  
  // .right-head::-webkit-scrollbar{
  //   height: 0;
  // }
  .head-checkbox {
    .el-checkbox {
      margin: 0;
    }
  }
  .title {
    font-size: 14px;
    padding: 0 10px;
    height: 35px;
    font-weight: bold;
    // background-color: #f2f6fc;
    display: flex;
    align-items: center;
    background-image: url(../../../public/image/title-bg.png);
    background-size: 100% 100%;
  }
  .table-list > div:nth-child(1) {
    padding: 10px;
  }
  .table-list,
  .data-list {
    font-size: 14px;
    display: flex;
    color: #333333;
    .table-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      .table-tr {
        flex: 1;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          border-top: 1px solid #fff
        }
        // border-top: 1px solid #fff;
        div:nth-child(1) {
          width: 200px;
          padding: 8px 10px;
          // min-height: 160px;
          // background-color: #eee;
          background: linear-gradient(-73deg, #dbe8f8, #f3f8fc);

          // background-image: linear-gradient(to left, #89b7fb, #b1c7fc, #d1d8fc, #ebebfd, #ffffff);
          display: flex;
          align-items: center;
          border-right: 1px solid #fff;
        }
        div:nth-child(2) {
          flex: 1;
          display: flex;
          align-items: center;
          padding: 3px 10px;
          background: #f8f8f9;
        }
      }
    }
  }
  .data-list {
    // border: 1px solid #308CE9;
    > div:nth-child(1) {
      padding: 0;
    }
    .customized-top-right {
      width: 240px;
      display: flex;
      flex-direction: column;
      padding: 0 10px;
      color: #606266;
      > div:nth-child(1) {
        margin-bottom: 10px;
        background-color: #E5F8FF;
      }
      > div:nth-child(2) {
        background-color: #FEF4EB;
      }
      > div {
        flex: 1;
        padding: 0 20px;
        // background-image: url(../../../public/image/juxing.png);
        // background-size: 100% 100%;
        text-align: center;
      }

      .title {
        font-size: 14px;
        background: none;
      }
      .content {
        font-size: 16px;
        color: #000;
      }
    }
  }
  // .mapbg{
  //   background-image: url(../../../public/image/ditubg.png);
  //   background-size: 100% 100%;
  //   padding: 5px;
  // }
  .map {
    width: 350px;
    height: 300px;
    position: relative;
    .full-screen {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 12px;
      z-index: 9;
      background-color: #e7e7e7;
      padding: 5px 10px;
      color: #377ffd;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .site-list {
      width: auto;
      padding: 10px;
      margin-bottom: 3px;
      background-color: #f3f8fc;
    }
  }
  .iframeFalse {
    width: 350px;
    height: 300px;
  }
  // .iframeFalse1 {
  //   width: 845px;
  //   height: 500px;
  // }
  // .iframeTrue {
  //   margin: 0;
  //   padding: 13px;
  //   border: 0;
  //   position: fixed;
  //   top: 5vh;
  //   left: 10vw;
  //   width: 80vw;
  //   height: calc(100vh - 80px);
  //   z-index: 1000;
  //   background-color: #fff;
  //   background: url("~@/assets/images/tanchudi.png") no-repeat;
  //   background-size: 100% 100%;
  // }
  // .data-form {
  //   // background-color: #fff;
  //   :deep .el-form-item__content {
  //     flex: 1;
  //   }
  // }
  .label-span-item {
    display: inline-block;
    color: #606266;
    font-size: 14px;
  }
}
.my-head {
  padding: 15px 40px 10px 40px;
  display: inline-block;
  width: 180px;
  text-align: center;
  font-size: 14px;
  color: #777777;
  background-image: url(../../../public/image/myHeadbg.png);
  background-size: 100% 100%;
  overflow: hidden;
  word-wrap: break-word; /*强制换行*/
  text-overflow: ellipsis; /*隐藏后添加省略号*/
  white-space: nowrap; /*强制不换行*/
  position: relative;
  z-index: 400;
}
.my-head:nth-child(1).action {
  text-align: left;
  // padding: 15px 40px 10px 10px;
  background-image: url(../../../public/image/myHeadbg2.png) !important;
  background-size: 100% 111%;
  background-position-y: -5px;
}

.my-head.action{
    font-size: 15px;
    color: #fff;
    background-image: url(../../../public/image/myHeadbg1.png);
    background-size: 100% 103%;
    position: relative;
    z-index: 400 !important;
}
$z-index-step: 1;
$left-offset-step: 60px;
@for $i from 2 through 300 {
  .my-head:nth-child(#{$i}) {
        z-index: (400 - $i) * $z-index-step;
        left: -($i - 1) * $left-offset-step;
    }
}

// .my-head:nth-child(2) {
//   z-index: 7;
//   left: -45px;
// }
// .my-head:nth-child(3) {
//   z-index: 6;
//   left: -85px;
// }
// .my-head:nth-child(4) {
//   z-index: 5;
//   left: -135px;
// }
// .my-head:nth-child(5) {
//   z-index: 4;
//   left: -175px;
// }
// .my-head:nth-child(6) {
//   z-index: 3;
//   left: -215px;
// }
.my-content {
  background-color: #fff;
  border: 1px solid #5298e8;
  margin-bottom: 10px;
  position: relative;
  box-shadow:  10px 10px 40px #bebebe,  -10px -10px 40px #ffffff;
  &::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: url(../../../public/image/jiao.png);
    background-size: 100% 100%;
  }
}

// .steps {
//   width: 100%;
//   color: #333333;
//   font-size: 14px;
//   display: flex;
//   justify-content: space-between;
//   background: #FBFCFF;
//   border: 1px solid #F6F6F6;
//   padding: 3px 8px;
//   >div{
//     display: flex;
//     align-items: center;
//   }
//   span{
//     display: inline-block;
//     width: 3px;
//     height: 100%;
//     background-color: #FF9D02;
//     margin-right: 10px;
//   }
//   // flex: 1;
//   // > div {
//   //   text-align: center;
//   //   font-size: 14px;
//   //   color: #666666;
//   //   height: 35px;
//   //   line-height: 35px;
//   //   background-image: url(../../../public/image/steps.png);
//   //   background-size: 100% 100%;
//   //   position: relative;
//   //   // background-color: #F4F6F8;
//   //   &.action {
//   //     color: #fff;
//   //     // background: #4895ED;
//   //     background-image: url(../../../public/image/steps1.png);
//   //     background-size: 100% 100%;
//   //   }
//   // }
//   // >i{
//   //     position: absolute;
//   //     top: -12px;
//   //     right: 0;
//   //     font-size: 60px;
//   // }
// }
// .steps:not(:nth-child(1)){
//     >div{
//         background-image: url(../../../public/image/steps.png);
//         background-size: 100% 100%;
//     }
// }
// .steps-tail {
//   justify-content: end;
//   > div {
//     padding: 5px 15px;
//     margin-right: 20px;
//     background: #f4f6f8;
//     border-radius: 4px;
//     font-size: 14px;
//     color: #555555;
//     cursor: pointer;
//   }
//   div:nth-child(2) {
//     background: #e8f1ff;
//     color: #0064de;
//   }
// }

.shici {
  /deep/ .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    .el-checkbox {
      width: auto;
      margin-bottom: 0;
    }
  }
}
// ::v-deep .el-checkbox-group {
//   display: flex;
//   flex-wrap: wrap;
//   >div{
//     display: flex;
//     width: 160px;
//   }
//   .el-checkbox {
//     flex: 1;
//     text-align: left;
//     font-size: 12px;
//     // margin: 10px 10px 0 10px;
//     padding: 10px;
//     overflow: hidden;
//     display: flex;
//     align-items: center;
//     white-space: wrap;
//   }
// }
::v-deep .el-dialog__body {
  padding-top: 10px;
}
::v-deep .el-tabs {
  display: flex;
  flex-direction: column;
  .el-tabs__content {
    flex: 1;
    overflow-y: auto;
  }
}
::v-deep .el-dialog{
    background-color: #F7FBFF;
}
::v-deep .el-dialog__header{
  background: url("@/assets/images/pTitle.png") no-repeat;
  background-size: 100% 100%;
}
::v-deep .el-dialog__header{
    padding: 13px 20px 10px;
}
// .time-type{
//   ::v-deep .el-form-item__label{
//     font-size: 12px;
//   }
//   ::v-deep .el-input__prefix{
//     display: none;
//   }
//   ::v-deep .el-input--prefix .el-input__inner{
//     padding-left: 10px;

//   }
// }
.footer-button {
  padding: 20px;
  .el-button.el-button--primary {
    color: #fff;
    background: linear-gradient(-24deg, #63cdff, #3d95f7);
    border: 0;
  }
  .el-button {
    background: #f1f7ff;
    border-radius: 4px;
    border: 1px solid #186fd9;
    color: #0064de;
  }
}
// .text {
//   color: #606266;
//   font-size: 14px;
// }

// .padbg {
//   position: fixed;
//   width: 100vw;
//   height: 100vh;
//   background-color: rgba(0, 0, 0, 0.3);
//   top: 0;
//   left: 0;
//   z-index: 1000;
// }
</style>
